<div class="tools-container">
            <div class="web-service" id="tool_category_div">
                <h2>${type}</h2>
                <ul>
                    <#if toolItems??>
                		<#assign items = toolItems.items>
							<#list items as item>
								<#assign thumbnail = item.thumbnail!''>
								<#assign index = item_index!''>
								<#assign title = item.title!''>
					                <li class="li-shadow">
					                    <div class="tools-alert-box" style="display:none">
					                        <@fromatTitle '' item.descripiton!'' 150 150 />
					                        <div class="tools-alert-box-details">
					                        	<input type="hidden" value="${item.id}" />
					                        	<a href="javascript:" >View Details</a>
					                        </div>
					                    </div>
				                    	<div class="tools-container-block-img"><a href="${item.link!''}" target="_blank"><img src="${thumbnail}" width="66" height="67"></a></div>
				                    	<div class="tools-container-block-title"><a href="${item.link!''}" target="_blank">${title}</a></div>
				                    </li>
							</#list>
                    </#if>
                    <div class="clear-float"></div>
                </ul>
            </div>
 </div>
 <div class="popup-box" id="tool_category_box" style="display:none"></div>
 <script type="text/javascript" src="${jsRoot}/jquery.js"></script>
<script>
/*
$(function(){
 	$("#tool_category_div > ul >li ").hover(
		  function () {
		    $(this).find("div.tools-alert-box").css("display","block");
		  },
		  function () {
		    $(this).find("div.tools-alert-box").css("display","none");
		  }
	);
	
	$("#tool_category_div > ul >li").find("a").click(function(){
		var id=$(this).prev().val();
		$.ajax({
			type:"GET",
			url:"${contextPath}/tools/showDetail/"+id,
			success: function(msg){
		     	$("#tool_category_box").html(msg);
		   }
		});
		$("#tool_category_box").css("display","block");
	});
	
		
	$("#tool_category_div > ul >li").find("img").click(function(){
		var id=$(this).parent().prev().find("input").val();
		$.ajax({
			type:"GET",
			url:"${contextPath}/tools/showDetail/"+id,
			success: function(msg){
		     	$("#tool_category_box").html(msg);
		   }
		});
		$("#tool_category_box").css("display","block");
	});
	
	$("#tool_category_div > ul >li").find(".tools-container-block-title").click(function(){
		var id=$(this).prev().prev().find("input").val();
		$.ajax({
			type:"GET",
			url:"${contextPath}/tools/showDetail/"+id,
			success: function(msg){
		     	$("#tool_category_box").html(msg);
		   }
		});
		$("#tool_category_box").css("display","block");
	});
	
	
});
function closeToolDetail(){
	$(".popup-box").html('');
	$(".popup-box").css("display","none");
}
function selectDetail(id,obj){
	$(obj).parent().children().removeClass();
	$(obj).addClass("popup-box-content-nav-now");
	$(".popup-box-content-block").css("display","none");
	$("#"+id).css("display","block");
}
function showBigPic(obj){
	var pic=$(obj).attr("src");
	var bigPic=$(obj).attr("bigPic");
	$("#big_pic").attr("src",bigPic);
}

*/
</script>
